<template>
	<div class="subscribe">
		<!-- <a href="https://duzhe.tmall.com/">555</a> -->
		<div  class="subscribeFace">
			<!-- <img src="../../assets/subscribe.png" /> -->
		</div>
		<div class="subscrib-Panel">
			<div class="subscrib-PanelLeft">
				<img src="../../assets/domestic.png" />
				<img src="../../assets/Schoolsmall.png" />
				<img src="../../assets/overseassmall.png" />
			</div>
			<div class="subscrib-PanelMiddle">
				<img src="../../assets/domestic-img.png" />
			</div>
			<div class="subscrib-PanelRight">
				<h4>读者</h4>
				<p>定价：9元/本 全年订购 <i class="italic-normal">216</i> 元/年</p>
				<p>国内邮发代号：54-17</p>
				<p>国外发行代号：M1161</p>
				<p>内容介绍</p>
				<span>《读者》创刊于1981年，迄今已有38年历史。月发行量位居全国前列，具有很高知名度和美誉度，被誉为“中国人的心灵读本”。发掘人性中的真善美，体现人文关怀。</span>
				<br />
				<button>立即订阅</button>
			</div>
		</div>
		
		<div class="subscribe-bottom">
			<h1>官方订购方式</h1>
			<h2>Official Order</h2>
		</div>
		
		<div class="order">
			<div class="orderOne">
				<img src="../../assets/tianmao.png" />
				<div class="orderOne-tianmao">
					<p>天猫官方旗舰店</p>
					<a target="blank" href="https://duzhe.tmall.com/">立即订阅</a>
					
				</div>
			</div>
			<div class="orderOne">
				<img src="../../assets/jingdong.png" />
				<div class="orderOne-tianmao">
					<p>天猫官方旗舰店</p>
					<a href="https://mall.jd.com/index-204926.html">立即订阅</a>
				</div>
			</div>
			<div class="orderOne">
				<img src="../../assets/subscribeweixin.png" />
				<div class="orderOne-tianmao">
					<p>天猫官方旗舰店</p>
					<a href="">使用微信扫描二维码订阅</a>
				</div>
			</div>
			
		</div>
		<footerA></footerA>
	</div>
</template>

<script>
	export default {
		name:'Subscribers'
	}
</script>

<style scoped>
	.subscribe{
		position: relative;
		top: 86px;
		left: 0;
		z-index: 1;
	}
	.subscribeFace{
		width: 100vw;
		height: 380px;
		background-image: url(../../assets/subscribe.png);
		background-size: 100vw 380px;
	}
	.subscrib-Panel{
		position: relative;
		width: 75vw;
		height: 400px;
		top: -180px;
		left: 12.5vw;
		box-shadow: 0px 10px  10px rgb(250,250,250);
		background-color: white;
		z-index: 10;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.subscrib-PanelLeft{
		width: 360px;
	}
	.subscrib-PanelMiddle{
		width: 300px;
	}
	.subscrib-PanelRight{
		width: 350px;
	}
	.subscrib-PanelRight>span{
		font-size: 14px;
		color: gray;
	}
	
	.italic-normal{
		font-style: normal !important;
		font-size: 1.8vw;
		color: #F07D33;
		font-weight: 600;
	}
	.subscrib-PanelRight>button{
		margin-top: 10px;
	    width: 6.5vw;	
		height: 2.4vw;
		background: linear-gradient(left,#F5AC59,#E1773C);
		border: none;
		border-radius: 0.2vw;
		color: white;
	}
	.subscribe-bottom {
		margin-top: -100px;
		text-align: center;
		height: 120px;
	}
	
	.subscribe-bottom>h1 {
		font-size: 50px;
		margin: 6px 0;
		font-weight: 400;
		color: rgba(0,0,0,0.6);
	}
	
	.subscribe-bottom>h2 {
		opacity: 0.1;
		font-size: 60px;
		font-weight: 500;
		z-index: -1;
		position: relative;
		top: -80px;
		letter-spacing: 6px;
	}
	.order{
		
		width: 60vw;
		margin: 100px auto;
		display: flex;
		justify-content: space-between;
	}
	.order>.orderOne{
		width: 32%;
		display: flex;
	}
	.order>.orderOne>img{
		width: 5vw;
		height: 5vw;
	}
	.orderOne-tianmao{
		margin-left: 1vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.orderOne-tianmao>p{
		margin: 0;
		font-size: 1.3vw;
	}
	.orderOne-tianmao>a{
		text-decoration: none;
		color: #1487E7;
		font-size: 1.0vw;
	}
	.orderOne-tianmao>a:hover{
		cursor: pointer;
	}
</style>
